<template>
	<view class="page" :style="{'background': banner.headerBgColor}">
		<view class="subject-rating-root">
			<view class="sub-score">
				<view class="sub-trademark">
					<text>DB评分</text>
					<text class="em">TM</text>
				</view>
				<view class="sub-content">
					<view class="sub-rating">
						<view class="score-num">{{banner.ratingValue || '0'}}</view>
						<view class="star-display">
							<view class="rating">
								<rating :count="banner.ratingValue" />
							</view>
							<view class="done-count">
								<text>{{rating.doneCount || 0}}人评分</text>
							</view>
						</view>
					</view>
					<view class="sub-chart">
						<view class="star-stats">
							<view class="stars-wrap">
								<image v-for="index of 5" :key="index" class="rating-star-icon" src=""></image>
							</view>
							<view class="chart-wrap">
								<text class="rating-progress" :style="{'width': (rating.stats[4]) * 100 + '%'}"></text>
							</view>
						</view>
						<view class="star-stats">
							<view class="stars-wrap">
								<image v-for="index of 4" :key="index" class="rating-star-icon" src=""></image>
							</view>
							<view class="chart-wrap">
								<text class="rating-progress" :style="{'width': (rating.stats[3]) * 100 + '%'}"></text>
							</view>
						</view>
						<view class="star-stats">
							<view class="stars-wrap">
								<image v-for="index of 3" :key="index" class="rating-star-icon" src=""></image>
							</view>
							<view class="chart-wrap">
								<text class="rating-progress" :style="{'width': (rating.stats[2]) * 100 + '%'}"></text>
							</view>
						</view>
						<view class="star-stats">
							<view class="stars-wrap">
								<image v-for="index of 2" :key="index" class="rating-star-icon" src=""></image>
							</view>
							<view class="chart-wrap">
								<text class="rating-progress" :style="{'width': (rating.stats[1]) * 100 + '%'}"></text>
							</view>
						</view>
						<view class="star-stats">
							<view class="stars-wrap">
								<image class="rating-star-icon" src=""></image>
							</view>
							<view class="chart-wrap">
								<text class="rating-progress" :style="{'width': (rating.stats[0]) * 100 + '%'}"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="subject-section_comments">
			<view class="subject-section_title">
				<view>短评</view>
			</view>
			<view class="comment-list">
				<view class="list comment-list">
					<view class="li" v-for="(it, idx) in interest.list" :key="idx">
						<view class="desc">
							<image class="avatar" :src="it.user.avatar"></image>
							<view class="user-info">
								<view class="user-name">{{it.user.name}}</view>
								<rating :count="it.ratingValue * 2" />
								<view class="date">{{it.createTime}}</view>
							</view>
						</view>
						<view class="comment-content interest">
							{{it.comment}}
						</view>
						<view class="btn-info">
							<view class="ic-btn ic-btn-like  left ">
								<image class="icon" src="https://img3.doubanio.com/f/talion/7a0756b3b6e67b59ea88653bc0cfa14f61ff219d/pics/card/ic_like_gray.svg"></image>
								<text class="text">{{it.voteCount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="interest.loading" style="padding-left: 44%;padding-top: 30rpx;padding-bottom: 30rpx;">
					<Loading13></Loading13>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rating from "@/components/uni-rating-start/uni-rating-start.vue"
	import Loading13 from "@/components/loading/loading13.vue";
	let util = require("@/common/util.js")
	let api = require("@/utils/api.js")
	export default {
		data() {
			return {
				banner: {id: -1},
				introShowMore: true,
				rating: {},
				interest: {
					list: [],
					loading: false,
					page: {page: 1, size: 10}
				}
			}
		},
		components: {rating, Loading13},
		onLoad(event) {
			if(event && event.query){
				try {
					this.banner = JSON.parse(decodeURIComponent(event.query));
				} catch (error) {
					this.banner = JSON.parse(event.query);
				}
			}
			this.getInterest(this.banner.id);
			this.getRating(this.banner.id);
		},
		onPullDownRefresh() {
			// 重置分页参数
			this.interest.list = [];
			this.interest.page.page = 1;
			// 重新请求
			this.getInterest(this.banner.id);
			this.getRating(this.banner.id);
		},
		onShareAppMessage() {
			return {
				title: '涨知识-读书',
				path: '/pages/article/article'
			}
		},
		methods: {
			checkIntroShwoMore() {
				const query = wx.createSelectorQuery();
				let self = this;
				query.select(".section-intro_desc").boundingClientRect(function (res) {
					const lineHeight = 16
					self.introShowMore = (res.height / lineHeight > 6)
				}).exec()
			},
			showMoreIntro(){
				this.introShowMore = false;
			},
			getRating(subjectId) {
				var that = this;
				uni.request({
					url: api.db_book_rating + subjectId,
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 'ok') {
							if(!res.data || !res.data.data){
								return;
							}
							that.rating = res.data.data;
							that.rating.stats = that.getJSONByStr(that.rating.stats, [0,0,0,0,0])
						} else {
							that.showNoDataErr = true;
							return;
						}
					}
				});
			},
			getInterest(subjectId) {
				var that = this;
				if(that.interest.loading)
					return;
				that.interest.loading = true;
				uni.request({
					url: api.db_book_interest + subjectId,
					data: that.interest.page,
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 'ok') {
							var data = res.data.data;
							if(!data || !data.list){
								return;
							}
							if(that.interest.page.page === 1)
								that.interest.list = data.list;
							else
								that.interest.list = that.interest.list.concat(data.list);
							that.interest.page.page++;
						}
					},
					complete: () => {
						uni.stopPullDownRefresh();
						that.interest.loading = false;
					}
				});
			},
			getJSONByStr(str, defaultVal){
				try {
					return JSON.parse(str);
				} catch (error) {
					console.log(error)
				}
				return defaultVal;
			},
			onReachBottom(event){
				this.getInterest(this.banner.id);
			},
		}
	}
</script>

<style>
.page {
	padding: 0rpx 30rpx 30rpx;
	height: auto;
	min-height: 100%;
	padding-top: 100rpx; 
}
page{
  height: 100%;
  color: #FFFFFF;
}
.main-info {
	min-height: 312rpx;
	padding-top: 100rpx; 
}
.poster {
	float: left;
	position: relative;
}
.poster image{
	width: 204rpx;
	height: 284rpx;
	border-radius: 10rpx;
	box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.info {
	position: relative;
	margin-left: 230rpx;
	margin-top: 20rpx;
}
.title {
	color: #FFFFFF;
	font-size: 46rpx;
	padding-top: 5rpx;
}
.honor {
	display: block;
	font-size: 23rpx;
	color: #9D5F00;
	margin: 30rpx 0 0;
}
.info-rank {
	display: inline-block;
	background-color: #FEF0B3;
	background: linear-gradient(#FFF3E6, #FEF0B3);
	padding-left: 16rpx;
	padding-right: 16rpx;
	border-top-left-radius: 6rpx;
	border-bottom-left-radius: 6rpx;
	line-height: 46rpx;
	min-width: 80rpx;
	box-sizing: border-box;
}
.info-scope {
	display: inline-block;
	background: linear-gradient(45deg, #FFD395, #FEC36E);
	line-height: 46rpx;
	margin-left: -2rpx;
	padding: 0 18rpx;
	border-top-right-radius: 6rpx;
	border-bottom-right-radius: 6rpx;
	min-width: 150rpx;
	box-sizing: border-box;
}
.author {
	font-size: 25rpx;
	color: rgba(255,255,255,0.7);
	margin: 30rpx 0 10rpx;
}
.subject-rating-root{
	-webkit-tap-highlight-color: rgba(255,0,0,0);
	margin-top: 20rpx;
}
.sub-score {
	background-color: rgba(0,0,0,0.1);
	border-radius: 12rpx;
	padding: 20rpx 30rpx 26rpx;
	margin-top: -20rpx;
}
.sub-score .sub-rating:after{
	content: '';
	width: 1rpx;
	height: 90rpx;
	position: absolute;
	z-index: 1;
	top: 10rpx;
	right: 0;
	background: rgba(255,255,255,0.2);
}
.sub-trademark{
	font-size: 22rpx;
	line-height: 44rpx;
	color: #fff;
	margin-bottom: 8rpx;
	display: flex;
	align-items: center;
}
.em {
	display: inline-block;
	font-size: 20rpx;
	color: rgba(255,255,255,0.7);
	top: -2rpx;
	font-style: normal;
	transform: scale(0.7);
}
.sub-content{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sub-rating{
	display: inline-flex;
	width: 50%;
	position: relative;
	vertical-align: bottom;
	justify-content: flex-start;
	align-items: center;
}
.score-num{
	display: inline-block;
	font-size: 76rpx;
	line-height: 100rpx;
	margin-right: 30rpx;
	color: #fff;
}
.star-display{
	display: inline-block;
	box-sizing: border-box;
	padding-bottom: 10rpx;
}
.rating-stars {
	display: inline-block;
	vertical-align: middle;
}
.rating-stars .rating-star{
	display: inline-block;
	margin-right: 2rpx;
}
.done-count{
	display: block;
	font-size: 22rpx;
	color: rgba(255,255,255,0.7);
	line-height: 1;
	margin-top: 10rpx;
}
.sub-chart{
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}
.star-stats{
	line-height: 0;
	position: relative;
	text-align: right;
}
.stars-wrap{
	margin-right: 10rpx;
	display: inline-block;
	vertical-align: middle;
	line-height: 14rpx;
	margin-bottom: 2rpx;
}
.rating-star-icon{
	display: inline-block;
	width: 16rpx;
	height: 18rpx;
}
.chart-wrap{
	width: 200rpx;
	height: 6rpx;
	background: rgba(255,255,255,0.2);
	border-radius: 6rpx;
	position: relative;
	z-index: 1;
	display: inline-block;
	vertical-align: middle;
	line-height: 14rpx;
	margin-bottom: 2rpx;
}
.rating-progress{
	display: inline-block;
	background: #FFAC2C;
	height: 6rpx;
	border-radius: 6rpx;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.tags{
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	line-height: 30rpx;
	float: left;
	overflow: auto hidden;
	position: relative;
	width: 98%;
	white-space: nowrap;
	-webkit-overflow-scrolling : touch;
}
.tag-header{
	display: inline-block;
	color: rgba(255,255,255,0.7);
	font-size: 22rpx;
	line-height: 20rpx;
	margin-right: 10rpx;
	position: relative;
}
.tag-content{
	background-color: rgba(0,0,0,0.25);
	padding: 15rpx;
	display: inline-block;
	color: white;
	border-radius: 20rpx;
	font-size: 22rpx;
	line-height: 20rpx;
	margin-left: 10rpx;
	position: relative;
}
.intro {
	margin-top: 40rpx;
}
.subject-section_title {
    font-size: 30rpx;
    color: white;
}
.subject-section_more {
    font-size: 26rpx;
    color: white;
	margin: 8px;
}
.subject-section_more view{
	width: 50%;
	display: inline-block;
}
.right_more{
	text-align: right;
}
.section-intro_desc {
    color: white;
	font-size: 24rpx;
	margin-top: 20rpx;
	line-height: 32rpx;
}
.hidden {
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.subject-section_comments{
	margin-top: 80rpx;
	background-color: rgba(0,0,0,0.1);
	border-radius: 12rpx;
	padding: 15rpx;
}
.comment-list {;
}
.comment-list .avatar {
    width: 50rpx;
	height: 50rpx;
    border-radius: 50%;
    vertical-align: text-top;
    margin-right: 10rpx;
    float: left;
}
.comment-list .li .desc .user-info {
    margin-left: 60rpx;
    line-height: 50rpx;
}
.comment-list .li .desc .user-name {
    font-size: 30rpx;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10rpx;
	color: white;
}
.list .li .rating-stars {
    vertical-align: middle;
    line-height: 1;
	display: inline-block;
}
.rating-stars .rating-star {
    display: inline-block;
    margin-right: 2rpx;
}
.comment-list .li .desc .date {
    font-size: 22rpx;
    color: #c0c0c0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 4rpx;
    margin-left: 10rpx;
}
.li:first-child {
    padding-top: 0;
}
.comment-list .li {
    padding: 3rpx 0 0 3rpx;
}
.list .li {
    position: relative;
    padding-top: 30rpx;
    word-wrap: break-word;
    overflow: hidden;
	border-bottom: 1rpx rgba(255,255,255,0.2) solid;
	padding-bottom: 25rpx;
}
.comment-list .li .desc {
    font-size: 0;
    line-height: normal;
    margin-bottom: 10rpx;
    color: #494949;
    position: relative;
}
.comment-list .li .comment-content {
    margin-left: 60rpx;
	color: white;
	font-size: 24rpx;
	line-height: 32rpx;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 12;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.comment-list .li .comment-content .interest {
	-webkit-line-clamp: 5;
}
.comment-list .li .comment-content .review {
	-webkit-line-clamp: 4;
}
.comment-list .li .comment-title {
	margin-left: 60rpx;
    font-weight: 500;
    font-size: 34rpx;
	color: #ffffff;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
}
.comment-list .li .btn-info {
    height: 44rpx;
    margin-top: 20rpx;
    margin-left: 50rpx;
}
.ic-btn .icon {
    content: '';
    width: 40rpx;
    height: 40rpx;
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-bottom: -4rpx;
}
.ic-btn .text {
    color: #ccc;
    margin-left: 6rpx;
    position: relative;
    left: 0;
    top: -6rpx;
	font-size: 24rpx;
}

.article_showall {
    display: block;
    background: url(http://www.360doc.cn/images/Document/showall.png) no-repeat left center;
    background-size: 28rpx;
    width: 180rpx;
    height: 28rpx;
    line-height: 28rpx;
    font-size: 25rpx;
    text-align: right;
    margin: 15rpx 10rpx 0;
	float: right;
}

.subject-section_rec {
	margin-top: 80rpx;
	padding: 15rpx;
	width: 100%;
}
.subject-section_rec .section-rec_list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: -20rpx;
	margin-top: 20rpx;
	width: 100%;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.subject-section_rec .section-rec_list .rec-item {
    flex: 1;
    margin-left: 8rpx;
    text-align: center;
	display: inline-block;
	width: 150rpx;
}
.subject-section_rec .section-rec_list .rec-pic {
    width: 140rpx;
    height: 200rpx;
	margin-top: 15rpx;
}
.subject-section_rec .section-rec_list .rec-pic image{
	border-radius: 8rpx;
	background-size: 103%;
}
.subject-section_rec .section-rec_list .rec-name {
    display: block;
    font-size: 22rpx;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 145rpx;
    margin-top: 10rpx;
}
.rank {
	width: 150rpx;
    height: 30rpx;
	line-height: 30rpx;
    font-size: 21rpx;
    text-align: center;
	font-weight: normal;
	padding: 10rpx 0 0;
	color: #c0c0c0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.rank .rating-stars .rating-star image{
	width: 20rpx;
	height: 20rpx;
}
</style>
